<template>
  <el-dialog width="600px" :close-on-click-modal="false" :title="title" @close="close" :visible.sync="visible" append-to-body>
    <el-form class="information mb10">
      <el-row>
        <el-col :span="8" offset="2">
          <h3>图号：{{ basics.drawingNumber }}</h3>
        </el-col>
        <el-col :span="8" offset="4">
          <h3>失误工序：{{ basics.processName }}</h3>
        </el-col>
      </el-row>

      <el-row class="mt10">
        <el-col :span="8" offset="2">
          <h3>品名：{{ basics.productName }}</h3>
        </el-col>
        <el-col :span="8" offset="4">
          <h3>评审数量：{{ basics.number }}</h3>
        </el-col>
      </el-row>

      <el-row class="mt10">
        <el-col :span="8" offset="2">
          <h3>材质：{{ basics.materialQuality }}</h3>
        </el-col>
      </el-row>
    </el-form>

    <el-form class="information mt20" v-if="lookshow" ref="form">
      <el-row>
        <el-col :span="12" offset="2">
          <el-form-item label="合格" prop="numReviewQualified">
            <el-input-number v-model="fiveForm.numReviewQualified" :disabled="disable" class="w150" size="small" :min="0" :max="5"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="工废" prop="numReviewWasteIndustrial">
            <el-input-number v-model="fiveForm.numReviewWasteIndustrial" :disabled="disable" class="w150" size="small" :min="0" :max="5"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" offset="2">
          <el-form-item label="返修" prop="numReviewRework">
            <el-input-number v-model="fiveForm.numReviewRework" :disabled="disable" class="w150" size="small" :min="0" :max="5"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="料废" prop="numReviewWasteMaterial">
            <el-input-number v-model="fiveForm.numReviewWasteMaterial" :disabled="disable" class="w150" size="small" :min="0" :max="5"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div v-if="!disable" class="footer" slot="footer">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { State, namespace } from 'vuex-class'

const vuexReview = namespace('TwoReview')

@Component({
  components: {}
})
export default class TechReviewDialog extends Vue {
  public $refs!: {
    form: any
    addProduct: any
  }
  @vuexReview.State numberQualified: any
  @vuexReview.State numberRework: any
  @vuexReview.State numberWasteIndustrial: any
  @vuexReview.State numberWasteMaterial: any

  disable: boolean = false
  title: string = '技术评审'
  visible: boolean = false
  total: number = 0
  lookshow: boolean = false
  formDetail: any = {
    con: ''
  }
  fiveForm: any = {
    inspectionId: '',
    numReviewQualified: 0,
    numReviewWasteIndustrial: 0,
    numReviewRework: 0,
    numReviewWasteMaterial: 0
  }
  basics: any = {
    drawingNumber: '',
    materialQuality: '',
    productName: '',
    number: '',
    processName: ''
  }

  getData(reviewObj: any) {
    this.basics.drawingNumber = reviewObj.drawingNumber
    this.basics.productName = reviewObj.productName
    this.basics.materialQuality = reviewObj.materialQuality
    this.basics.number = reviewObj.number
    this.fiveForm.inspectionId = reviewObj.inspectionId
    this.basics.processName = reviewObj.processName
  }
  look() {
    this.disable = true
    this.title = '查看评审结果'

    this.lookshow = false
    this.visible = true
  }

  open() {
    this.disable = false
    this.lookshow = true
    this.title = '技术评审'
    this.visible = true
  }
  sum() {
    this.total = this.fiveForm.numReviewQualified + this.fiveForm.numReviewRework + this.fiveForm.numReviewWasteIndustrial + this.fiveForm.numReviewWasteMaterial
  }

  save() {
    if (this.title == '技术评审') {
      this.sum()
      if (this.total == this.basics.number) {
        this.$emit('review-confirm', { ...this.fiveForm })
      } else {
        this.$alert('您填报的数量不等于需要审核的数量，请重新填写！', '错误提示', {
          confirmButtonText: '确定',
          type: 'error'
        })
      }
    }
  }
  close() {
    this.$refs.form.resetFields()
    this.disable = false
    this.title = '技术评审'

    this.total = 0
    this.lookshow = false
    this.formDetail = {
      con: ''
    }
    this.fiveForm = {
      inspectionId: '',
      numReviewQualified: 0,
      numReviewWasteIndustrial: 0,
      numReviewRework: 0,
      numReviewWasteMaterial: 0
    }
    this.basics = {
      drawingNumber: '',
      materialQuality: '',
      productName: '',
      number: '',
      processName: ''
    }
    this.visible = false
  }
}
</script>

<style lang="scss" scoped>
.fivereview {
  .footer {
    border-top: 1px solid #eee;
    padding: 10px 20px;
    background: #fefefe;
    text-align: center;
  }
}
</style>
